// 引入vuex
// 可以理解为，import获取的是vue模块export出来的函数的地址,因此在各地导入的是同一个Vue对象
import Vue from 'vue'
import Vuex from 'vuex'



Vue.use(Vuex)
console.log('这是store里的vue')
console.dir(Vue)
// console.log(this); undefine


// 实例化
const store = new Vuex.Store({
    // 严格模式
    strict: true,
    // 状态
    state:{
        list: [
            {
                id: 1,
                name: '吃饭',
                done:true
            },
            {
                id: 2,
                name: '睡觉',
                done:false
            },
            {
                id: 3,
                name: '打游戏',
                done:true
            }
        ]
    },
    // 类似vue实例的计算属性
    getters: {
        // 控制底部是否显示的计算属性
        isShowFooter (state) {
            return state.list.length !== 0
        }
    },
    // 修改state里的数据用到的方法(同步)
    mutations: {
        // 给list添加元素
        addTodoList (state,payload) {
            console.log(state,payload);
            let data = {
                id: state.list.length==0? 1: state.list[state.list.length-1].id+1,
                name: payload.name,
                done:false
            }

            state.list.push(data)
        },
        // 改变list内元素done属性
        changeDone (state,payload) {
            console.log(state,payload);
            state.list.forEach((item) => {
                if (item.id==payload.id) {
                    item.done=!item.done
                }
            })
        },
        // 删除list内的元素
        deleteItem (state,payload) {
            state.list =  state.list.filter(item=>item.id!=payload.id)
        },
        // 修改list的内容
        confirmEdit (state,payload) {
            console.log(state,payload);
            state.list.find(item=>item.id==payload.id).name=payload.newName
        },
        // 删除已完成的
        clearCompelete (state) {
            state.list = state.list.filter(item=>item.done==false)
        }
    },
    // 修改state里的数据用到的方法(异步)
    actions: {
        // 删除已完成的项
        clearCompelete (store) {
            setTimeout(() => {
                // console.log(state);
                
                // 不能再actions里修改数据，要调用mutation里的方法
                // store.state.list = store.state.list.filter(item=>item.done==false)
                store.commit('clearCompelete')
            },0)   
        }
    }
    
})
// 导出实例化的仓库
export default store
// export default Vue